<template>
  <div class="container">
    <div class="item">
      <div class="demo-inner-divider">状态尺寸</div>
      样式1
      <e-tag size="mini">迷你标签</e-tag>
      <e-tag size="small">小型标签</e-tag>
      <e-tag>中等标签</e-tag>
    </div>
    <div class="item">
      样式2--dark
      <e-tag
        dark
        size="mini">迷你标签</e-tag>
      <e-tag
        dark
        size="small">小型标签</e-tag>
      <e-tag dark>中等标签</e-tag>
    </div>
    <div class="item">
      可删除
      <e-tag
        size="mini"
        closable>迷你标签</e-tag>
      <e-tag size="small" closable>小型标签</e-tag>
      <e-tag closable>中等标签</e-tag>
    </div>
    <div class="item">
      <div class="demo-inner-divider">状态标签</div>
      中等尺寸
      <e-tag
        size="medium"
        status="success"
      >标签一</e-tag>
      <e-tag status="error">标签二</e-tag>
      <e-tag status="warning">标签三</e-tag>
      <e-tag>标签四</e-tag>
      <e-tag status="suspend">标签五</e-tag>
      中等尺寸
      <e-tag
        size="medium"
        status="success"
        dark
      >标签一</e-tag>
      <e-tag status="error" dark>标签二</e-tag>
      <e-tag status="warning" dark>标签三</e-tag>
      <e-tag dark>标签四</e-tag>
      <e-tag status="suspend" dark>标签五</e-tag>
    </div>
    <div class="item">
      小型尺寸
      <e-tag
        size="small"
        status="success"
      >标签一</e-tag>
      <e-tag size="small" status="error">标签二</e-tag>
      <e-tag size="small" status="warning">标签三</e-tag>
      <e-tag size="small">标签四</e-tag>
      <e-tag size="small" status="suspend">标签五</e-tag>
      小型尺寸
      <e-tag
        size="small"
        status="success"
        dark
      >标签一</e-tag>
      <e-tag size="small" status="error" dark>标签二</e-tag>
      <e-tag size="small" status="warning" dark>标签三</e-tag>
      <e-tag size="small" dark>标签四</e-tag>
      <e-tag size="small" status="suspend" dark>标签五</e-tag>
    </div>
    <div class="item">
      迷你尺寸
      <e-tag
        size="mini"
        status="success"
      >标签一</e-tag>
      <e-tag size="mini" status="error">标签二</e-tag>
      <e-tag size="mini" status="warning">标签三</e-tag>
      <e-tag size="mini">标签四</e-tag>
      <e-tag size="mini" status="suspend">标签五</e-tag>
      迷你尺寸
      <e-tag
        size="mini"
        status="success"
        dark
      >标签一</e-tag>
      <e-tag size="mini" status="error" dark>标签二</e-tag>
      <e-tag size="mini" status="warning" dark>标签三</e-tag>
      <e-tag size="mini" dark>标签四</e-tag>
      <e-tag size="mini" status="suspend" dark>标签五</e-tag>
    </div>
    <div class="item">
      <div class="demo-inner-divider">可删除的标签</div>
      <e-tag size="medium" status="success" closable @close="showAlert">标签一</e-tag>
      <e-tag status="error" closable>标签二</e-tag>
      <e-tag status="warning" closable>标签三</e-tag>
      <e-tag closable>标签四</e-tag>
      <e-tag status="suspend" closable>标签五</e-tag>
    </div>
    <tag-md class="markdown-body"></tag-md>
  </div>
</template>
<script setup>
import tagMd from '../../docs/tag.md';
</script>
<script>
export default {
  methods:{
    showAlert(e) {
      alert(`close事件.`)
    }
  }
}
</script>
<style scoped>
.item{
  margin: 20px;
}
.e-tag{
  margin-right: 10px;
}
</style>
